<template>
  <div class="bridge">
    <el-card class="box-card right">
      <div class="flexBetween">
        <div class="flex">
          <el-select
            style="width: 120px"
            v-model="regionCode"
            placeholder="请选择省"
            size="small"
            @change="changeRegion(regionCode)"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
          <el-select
            style="width: 120px"
            v-model="cityCode"
            placeholder="请选择市"
            size="small"
            class="paddingLeft"
            @change="changeCity(cityCode)"
            clearable
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
          <el-select
            style="width: 120px"
            v-model="areaCode"
            placeholder="请选择区"
            size="small"
            class="paddingLeft"
            clearable
          >
            <el-option
              v-for="item in areaOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
          <el-input
            placeholder="请输入桥组名称"
            v-model.trim="groupName"
            size="small"
            class="paddingLeft"
            style="width:150px"
            clearable
          ></el-input>
          <el-button
            type="primary"
            size="small"
            class="paddingLeft"
            style="font-weight: 900;"
            @click="queryBridgeGroup(1)"
          >查询</el-button>
        </div>
        <div>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addDialogEquipment"
          >新增桥组</el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addDialogEquipment"
          >批量导入</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
        class="tableTop"
        stripe
        max-height="600"
        size="small"
        @expand-change="expand"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children" stripe size="small">
              <el-table-column label="桥梁名称" prop="name" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tooltip content="桥梁详情">
                    <el-button type="text" @click="detail(scope.row)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="桥梁编码" prop="code" show-overflow-tooltip></el-table-column>
              <el-table-column label="桥梁类型" prop="bridgeTypeName" show-overflow-tooltip></el-table-column>
              <el-table-column label="桥梁全长(m)" prop="length" show-overflow-tooltip></el-table-column>
              <el-table-column label="缩略图" prop="area" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px;margin-top:10px;"
                    :src="download + scope.row.realisticPictureList[0].path"
                    :preview-src-list="[download + scope.row.realisticPictureList[0].path]"
                    v-if="scope.row.realisticPictureList.length > 0"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column label="区域" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>
                    {{scope.row.provinceName}}
                    <span
                      v-if="scope.row.municipalityName && scope.row.municipalityName !== ''"
                    >/{{scope.row.municipalityName}}</span>
                    <span
                      v-if="scope.row.regionName && scope.row.regionName !== ''"
                    >/{{scope.row.regionName}}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="desc" show-overflow-tooltip></el-table-column>
              <el-table-column label="是否启用" prop="status" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.status === 1? '启用' : scope.row.status === 0 ? '停用' : ''}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-tooltip content="设备管理">
                    <el-button type="text" @click="toEquip(scope.row)">
                      <img
                        src="../../assets/images/pages/setting.png"
                        style="width:14px;height:14px;"
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="模型管理">
                    <el-button type="text" @click="model(scope.row)">
                      <img
                        src="../../assets/images/pages/model.png"
                        style="width:14px;height:14px;"
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="修改">
                    <el-button type="text" icon="el-icon-edit-outline" @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除">
                    <el-button
                      type="text"
                      icon="el-icon-delete"
                      style="color:red !important"
                      @click="removeBridge(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="groupName" show-overflow-tooltip></el-table-column>
        <el-table-column label="编码" prop="code" show-overflow-tooltip></el-table-column>
        <el-table-column label="区域" prop="area" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>
              {{scope.row.provinceName}}
              <span
                v-if="scope.row.municipalityName && scope.row.municipalityName !== ''"
              >/{{scope.row.municipalityName}}</span>
              <span
                v-if="scope.row.regionName && scope.row.regionName !== ''"
              >/{{scope.row.regionName}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip content="新增桥梁">
              <el-button type="text" icon="el-icon-plus" @click="addEquipment(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button
                type="text"
                icon="el-icon-delete"
                style="color:red !important"
                @click="deleteGroup(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-count="pageNum"
          @current-change="changeCurrent"
        ></el-pagination>
      </div>
    </el-card>
    <!--  新增桥组 -->
    <vx-popup
      :title="groupTitle"
      width="410px"
      @close="pontinecancel"
      :active.sync="addVisible"
      @confirmPopup="pontineAdd"
      @cancelPopup="pontinecancel"
    >
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="桥组名称:" prop="groupName">
          <el-input v-model.trim="addForm.groupName" size="small" clearable placeholder="请输入桥组名称"></el-input>
        </el-form-item>
        <el-form-item label="桥组编号:" prop="code">
          <el-input v-model.trim="addForm.code" size="small" clearable placeholder="请输入桥组编号"></el-input>
        </el-form-item>
        <el-form-item label="所属省:" prop="provinceCode">
          <el-select
            v-model="addForm.provinceCode"
            placeholder="请选择省"
            size="small"
            @change="changeAddRegion(addForm.provinceCode)"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属市:" prop="municipalityCode">
          <el-select
            v-model="addForm.municipalityCode"
            placeholder="请选择市"
            size="small"
            class="paddingLeft"
            @change="changeAddCity(addForm.municipalityCode)"
            clearable
          >
            <el-option
              v-for="item in addCityOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区:" prop="regionCode">
          <el-select
            v-model="addForm.regionCode"
            placeholder="请选择区"
            size="small"
            class="paddingLeft"
            @change="changeArea(addForm.regionCode)"
            clearable
          >
            <el-option
              v-for="item in addAreaOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </vx-popup>
    <!--  新增桥组 -->
    <el-dialog title="保存成功" :visible.sync="saveVisible" width="680px">
      <p>保存成功，是否进行下一步？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBridge">取 消</el-button>
        <el-button type="primary" @click="savedDalogVisible">新建桥梁</el-button>
      </span>
    </el-dialog>
    <!-- 新增桥梁 -->
    <vx-popup
      :title="addtitle"
      width="900px"
      @close="cancelFormSubmit"
      :active.sync="dialogVisible"
      @confirmPopup="submit"
      @cancelPopup="cancelFormSubmit"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="桥梁名称:" prop="name">
              <el-input v-model.trim="ruleForm.name" size="small" clearable placeholder="请输入桥梁名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁编码:" prop="code">
              <el-input v-model.trim="ruleForm.code" size="small" clearable placeholder="请输入桥梁编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁全长:" prop="length">
              <el-input v-model.trim="ruleForm.length" size="small" clearable placeholder="请输入桥梁全长"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="桥梁规范:" prop="standardId">
              <el-select
                v-model="ruleForm.standardId"
                placeholder="请选择桥梁规范"
                size="small"
                @change="changeStandardId"
                clearable
              >
                <el-option
                  v-for="(item,index) in standardList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁类型:" prop="bridgeTypeId">
              <el-select
                v-model="ruleForm.bridgeTypeId"
                placeholder="请选择桥梁类型"
                size="small"
                @change="changeType"
                clearable
              >
                <el-option
                  v-for="(item,index) in bridgeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁种类:" prop="bridgeKindId">
              <el-select
                v-model="ruleForm.bridgeKindId"
                placeholder="请选择桥梁种类"
                size="small"
                @change="changeKind"
                clearable
              >
                <el-option
                  v-for="(item,index) in kindList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="养护类别:" prop="maintenanceType">
              <el-select
                v-model="ruleForm.maintenanceType"
                placeholder="请选择养护类别"
                size="small"
                @change="changeMaintenanceType"
                clearable
              >
                <el-option
                  v-for="(item,index) in mainList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="养护级别:" prop="maintenanceLevel">
              <el-select v-model="ruleForm.maintenanceLevel" placeholder="请选择养护级别" size="small" clearable>
                <el-option
                  v-for="(item,index) in typeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运行状态:" prop="status">
              <el-radio-group v-model="ruleForm.status" size="small">
                <el-radio :label="0">停用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="所属省:" prop="provinceCode">
              <el-select
                v-model="ruleForm.provinceCode"
                placeholder="请选择省"
                size="small"
                @change="changeRuleRegion(ruleForm.provinceCode)"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.regionCode"
                  :label="item.regionName"
                  :value="item.regionCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属市:" prop="municipalityCode">
              <el-select
                v-model="ruleForm.municipalityCode"
                placeholder="请选择市"
                size="small"
                @change="changeRuleCity(ruleForm.municipalityCode)"
                clearable
              >
                <el-option
                  v-for="item in ruleCityOptions"
                  :key="item.regionCode"
                  :label="item.regionName"
                  :value="item.regionCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区:" prop="regionCode">
              <el-select
                v-model="ruleForm.regionCode"
                placeholder="请选择区"
                size="small"
                @change="changeRuleArea(ruleForm.regionCode)"
                clearable
              >
                <el-option
                  v-for="item in ruleAreaOptions"
                  :key="item.regionCode"
                  :label="item.regionName"
                  :value="item.regionCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="桥梁位置:">
              <div v-if="addtitle === '新增桥梁'">

                <div class="map_box" id="map">
                  <!-- <el-input
                  v-model.trim="address"
                  id="suggestId"
                  name="ruleForm.address"
                  size="small"
                  class="item"
                  placeholder="请输入关键字"
                ></el-input> -->
                </div>
              </div>
              <div v-else style="width:360px;">
                <div class="map_box" id="mapContaion">
                  <!-- <el-input
                  v-model.trim="address"
                  id="suggestId"
                  name="ruleForm.address"
                  size="small"
                  class="item"
                  placeholder="请输入关键字"
                ></el-input> -->
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="桥梁简介:" prop="desc">
          <el-input
            type="textarea"
            v-model.trim="ruleForm.desc"
            maxlength="500"
            show-word-limit
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="桥梁图片:" prop="realisticPictureList">
          <el-upload
            :action="upload"
            list-type="picture-card"
            :on-remove="removeRender"
            :on-success="handleSuccessRender"
            :file-list="imgList"
            :limit="1"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>
<script>
  // 滚动条
  import VuePerfectScrollbar from "vue-perfect-scrollbar";
  import { deepClone } from "@/util.js";
  import base from "../../api/base";
  export default {
    data() {
      return {
        upload: base.UPLOADURL,
        download: base.DOWNLOADURL,
        imgList: [],
        address:'',
        addtitle: "新增桥梁",
        groupTitle: "新增桥组",
        addVisible: false, //桥组显示隐藏
        saveVisible: false, //保存弹框
        dialogVisible: false,
        mapContent: false,
        options: [],
        cityOptions: [],
        areaOptions: [],
        addCityOptions: [],
        addAreaOptions: [],
        ruleCityOptions: [],
        ruleAreaOptions: [],
        groupName: "",
        regionCode: "",
        cityCode: "",
        areaCode: "",
        pageNum: 1,
        pageSize: 10,
        loading: true,
        index: false,
        tableData: [],
        total: 0,
        addForm: {
          groupName: "",
          code: "",
          regionCode: "",
          municipalityCode: "",
          provinceCode: "",
          regionName: "",
          municipalityName: "",
          provinceName: ""
        },
        addRules: {
          groupName: [
            { required: true, message: "请输入桥组名称", trigger: "blur" }
          ],
          code: [{ required: true, message: "请输入桥组编号", trigger: "blur" }],
          provinceCode: [
            { required: true, message: "请选择所属省", trigger: "change" }
          ],
          municipalityCode: [
            { required: true, message: "请选择所属市", trigger: "change" }
          ],
          regionCode: [
            { required: true, message: "请选择所属区", trigger: "change" }
          ]
        },
        add: false,
        bridgeList: [],
        standardList: [
          {
            label: "城市桥梁规范",
            value: "0"
          },
          {
            label: "公路桥梁规范",
            value: "1"
          }
        ],
        kindList: [],
        mainList: [
          {
            label: "Ⅰ类养护",
            value: "0"
          },
          {
            label: "Ⅱ类养护",
            value: "1"
          },
          {
            label: "Ⅲ类养护",
            value: "2"
          },
          {
            label: "Ⅳ类养护",
            value: "3"
          },
          {
            label: "Ⅴ类养护",
            value: "4"
          }
        ],
        typeList: [
          {
            value: "0",
            label: "Ⅰ"
          },
          {
            value: "1",
            label: "Ⅱ"
          },
          {
            value: "2",
            label: "Ⅲ"
          }
        ],
        ruleForm: {
          name: "",
          code: "",
          bridgeTypeId: "",
          bridgeTypeName: "",
          bridgeKindId: "",
          bridgeKindName: "",
          length: "",
          lat: "",
          lng: "",
          status: 1,
          desc: "",
          maintenanceType: "",
          maintenanceLevel: "",
          regionCode: "",
          municipalityCode: "",
          provinceCode: "",
          regionName: "",
          municipalityName: "",
          provinceName: "",
          standardId: "",
          standardName: "",
          realisticPictureList: []
        },
        rules: {
          name: [{ required: true, message: "请输入桥梁名称", trigger: "blur" }],
          code: [{ required: true, message: "请输入桥梁编码", trigger: "blur" }],
          length: [
            { required: true, message: "请输入桥梁长度", trigger: "blur" }
          ],
          desc: [{ required: true, message: "请输入桥梁简介", trigger: "blur" }],
          standardId: [
            { required: true, message: "请选择桥梁规范", trigger: "change" }
          ],
          bridgeTypeId: [
            { required: true, message: "请选择桥梁类型", trigger: "change" }
          ],
          bridgeKindId: [
            { required: true, message: "请选择桥梁种类", trigger: "change" }
          ],
          provinceCode: [
            { required: true, message: "请选择所属省", trigger: "change" }
          ],
          municipalityCode: [
            { required: true, message: "请选择所属市", trigger: "change" }
          ],
          maintenanceType: [
            { required: true, message: "请选择养护类别", trigger: "change" }
          ],
          maintenanceLevel: [
            { required: true, message: "请选择养护级别", trigger: "change" }
          ],
          regionCode: [
            { required: true, message: "请选择所属区", trigger: "change" }
          ],
          status: [
            { required: true, message: "请选择运行状态", trigger: "change" }
          ],
          realisticPictureList: [
            { required: true, message: "请上传桥梁图片", trigger: "change" }
          ]
        },
        groupId: ""
      };
    },
    created() {
      this.getArea(100000, data => {
        this.options = data;
      });
      this.queryBridgeGroup(1);
      this.findDataTypeList()
    },
    components: {
      VuePerfectScrollbar
    },
    methods: {
      //跳转到设备
      toEquip(row){
        this.$router.push({path:'/bridgeInformation/equipmentManagement',query: {id:row.id}})
      },
      //省市查询
      getArea(id, callback) {
        this.$api.bridge.queryBridgeRegion({ parentId: id }).then(res => {
          if (res.data.success) {
            return callback(res.data.data);
          }
        });
      },
      //桥梁种类
      findDataTypeList(){
        let data = {
          pId: 0,
          type: 1,
          isDelete: 0
        }
        this.$api.bridge.findDataTypeList(data).then(res => {
          if(res.data.success){
            this.kindList = res.data.data
          }
        })
      },
      //搜索框省
      changeRegion(val) {
        this.cityOptions = [];
        this.cityCode = "";
        this.areaOptions = [];
        this.areaCode = "";
        this.getArea(val, data => {
          this.cityOptions = data;
        });
      },
      //搜索框市
      changeCity(val) {
        this.areaOptions = [];
        this.areaCode = "";
        this.getArea(val, data => {
          this.areaOptions = data;
        });
      },
      changeAddRegion(val) {
        this.addAreaOptions = [];
        this.addForm.regionCode = "";
        this.addForm.regionName = "";
        this.addCityOptions = [];
        this.addForm.municipalityCode = "";
        this.addForm.municipalityName = "";
        this.getArea(val, data => {
          this.addCityOptions = data;
        });
        this.options.map(v => {
          if (v.regionCode === val) {
            this.addForm.provinceName = v.regionName;
          }
        });
      },
      changeAddCity(val) {
        this.addAreaOptions = [];
        this.addForm.regionCode = "";
        this.addForm.regionName = "";
        this.getArea(val, data => {
          this.addAreaOptions = data;
        });
        this.addCityOptions.map(v => {
          if (v.regionCode === val) {
            this.addForm.municipalityName = v.regionName;
          }
        });
      },
      changeArea(val) {
        this.addAreaOptions.map(v => {
          if (v.regionCode === val) {
            this.addForm.regionName = v.regionName;
          }
        });
      },
      changeRuleRegion(val) {
        this.ruleAreaOptions = [];
        this.ruleForm.regionCode = "";
        this.ruleForm.regionName = "";
        this.ruleCityOptions = [];
        this.ruleForm.municipalityCode = "";
        this.ruleForm.municipalityName = "";
        this.getArea(val, data => {
          this.ruleCityOptions = data;
        });
        this.options.map(v => {
          if (v.regionCode === val) {
            this.ruleForm.provinceName = v.regionName;
          }
        });
      },
      changeRuleCity(val) {
        this.ruleAreaOptions = [];
        this.ruleForm.regionCode = "";
        this.ruleForm.regionName = "";
        this.getArea(val, data => {
          this.ruleAreaOptions = data;
        });
        this.ruleCityOptions.map(v => {
          if (v.regionCode === val) {
            this.ruleForm.municipalityName = v.regionName;
          }
        });
      },
      changeRuleArea(val) {
        this.ruleAreaOptions.map(v => {
          if (v.regionCode === val) {
            this.ruleForm.regionName = v.regionName;
          }
        });
      },
      //桥梁规范
      changeStandardId(val) {
        this.ruleForm.bridgeTypeId = "";
        this.queryBridgeTypeList(val);
        this.standardList.map(v => {
          if (v.value === val) {
            this.ruleForm.standardName = v.label;
          }
        });
      },
      changeType(val) {
        this.bridgeList.map(v => {
          if (v.id === val) {
            this.ruleForm.bridgeTypeName = v.name;
          }
        });
      },
      changeKind(val) {
        this.kindList.map(v => {
          if (v.value === val) {
            this.ruleForm.bridgeKindName = v.label;
          }
        })
      },
      //养护类型
      changeMaintenanceType(val) {
        this.ruleForm.maintenanceLevel = ""
      },
      //桥梁类型
      queryBridgeTypeList(id) {
        this.$api.bridge.queryBridgeTypeList({ standardId: id }).then(res => {
          if (res.data.success) {
            this.bridgeList = res.data.data[0];
          }
        })
      },
      //桥组查询
      queryBridgeGroup(val) {
        if (val) {
          this.pageNum = 1
        }
        let data = {
          provinceCode: this.regionCode,
          municipalityCode: this.cityCode,
          regionCode: this.areaCode,
          groupName: this.groupName,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        };
        this.$api.bridge.queryBridgeGroup(data).then(res => {
          if (res.data.success) {
            let _obj = deepClone(res.data.data.currentPageData);
            _obj.forEach((item, index) => {
              item.children = [];
            });
            this.tableData = deepClone(_obj);
            this.total = res.data.data.instanceList.length;
            this.loading = false;
          }
        })
      },
      changeCurrent(val) {
        this.pageNum = val
        this.queryBridgeGroup()
      },
      resetGroup() {
        this.addForm = {
          groupName: "",
          code: "",
          regionCode: "",
          municipalityCode: "",
          provinceCode: "",
          regionName: "",
          municipalityName: "",
          provinceName: ""
        }
      },
      // 新增桥组
      addDialogEquipment() {
        this.groupTitle = "新增桥组"
        this.$refs["addForm"].resetFields()
        this.addVisible = true
        this.cityOptions = []
        this.areaOptions = []
      },
      // 桥组修改弹框
      handelEdit(val) {
        this.groupTitle = "修改桥组";
        if (val.municipalityCode && val.municipalityCode !== "") {
          this.changeAddRegion(val.provinceCode);
        }
        if (val.regionCode && val.regionCode !== "") {
          this.changeAddCity(val.municipalityCode);
          this.changeArea(val.regionCode);
        }
        this.addForm = JSON.parse(JSON.stringify(val))
        this.addVisible = true
      },
      //删除桥组
      deleteGroup(val) {
        this.$confirm("此操作将删除桥组, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api.bridge.deleteBridgeGroupById({ id: val }).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "删除成功",
                  color: "success"
                });
                this.queryBridgeGroup();
              }
            });
          })
          .catch(() => {});
      },
      // 取消桥组
      pontinecancel() {
        this.addVisible = false;
        this.resetGroup();
      },
      // 桥组确认
      pontineAdd() {
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            if (this.groupTitle === "新增桥组") {
              this.$api.bridge.addBridgeGroup(this.addForm).then(res => {
                if (res.data.success) {
                  this.$vs.notify({
                    text: "新增桥组成功",
                    color: "success"
                  });
                  this.addVisible = false;
                  this.resetGroup();
                  this.queryBridgeGroup()
                }
              });
            } else {
              let data = {
                id: this.addForm.id,
                groupName: this.addForm.groupName,
                code: this.addForm.code,
                regionCode: this.addForm.regionCode,
                municipalityCode: this.addForm.municipalityCode,
                provinceCode: this.addForm.provinceCode,
                regionName: this.addForm.regionName,
                municipalityName: this.addForm.municipalityName,
                provinceName: this.addForm.provinceName,
                cache: this.addForm.cache,
                dp: this.addForm.dp,
                type: this.addForm.type,
                deleted: this.addForm.deleted,
                assembly: this.addForm.assembly
              };
              this.$api.bridge.updateBridgeGroupById(data).then(res => {
                if (res.data.success) {
                  this.$vs.notify({
                    text: "修改桥组成功",
                    color: "success"
                  });
                  this.addVisible = false;
                  this.resetGroup();
                  this.queryBridgeGroup();
                }
              });
            }
          } else {
            return false;
          }
        });
      },
      // 桥梁详情
      detail(val) {
        let  facadeFolderId = ''
        if(val.facadeFolderId){
          facadeFolderId = val.facadeFolderId
        }
        let realisticPictureFolderId = ''
        if(val.realisticPictureFolderId){
          realisticPictureFolderId = val.realisticPictureFolderId
        }
        this.$router.push({
          path: "/bridgeInformation/bridgeDetail",
          query: { desc: val.desc, id: val.id,realisticPictureFolderId: realisticPictureFolderId,facadeFolderId:facadeFolderId}
        });
      },
      //表格展开
      expand(row, index) {
        this.index = !this.index;
        this.queryBridgeBasicByParentId(row.id);
      },
      //获取桥梁
      queryBridgeBasicByParentId(id) {
        this.$api.bridge.queryBridgeBasicByParentId({ groupId: id }).then(res => {
          if (res.data.success) {
            this.tableData.forEach((item, index) => {
              if (id === item.id) item.children = res.data.data[0];
            });
          }
        });
      },
      handleSuccessRender(res, file) {
        this.ruleForm.realisticPictureList.push({
          path: res.data.successFiles[0].filePath,
          id: res.data.successFiles[0].id
        });
      },
      removeRender() {
        this.ruleForm.realisticPictureList = [];
      },
      // 新增弹框
      addEquipment(val) {
        this.addtitle = "新增桥梁";
        this.$refs["ruleForm"].resetFields();
        this.imgList = [];
        this.$nextTick(function() {
          var th = this
          var map = new T.Map("map")
          map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
          var miniMap = new T.Control.OverviewMap({
            isOpen: true,
            size: new T.Point(100, 100)
          });
          map.addControl(miniMap);
          map.addEventListener('click',MapClick)
          function MapClick(e){
            map.clearOverLays();
            var marker = []
            marker.push(e.lnglat.getLng())
            marker.push(e.lnglat.getLat())
            console.log(marker)
            map.addOverLay(new T.Marker(new T.LngLat(marker[0],marker[1])))
            th.ruleForm.lng = marker[0]
            th.ruleForm.lat = marker[1]
          }
        });
        this.dialogVisible = true;
        this.groupId = val;
      },
      //编辑桥梁
      edit(val) {
        this.addtitle = "修改桥梁";
        this.changeStandardId(val.standardId)
        if (val.municipalityCode && val.municipalityCode !== "") {
          this.changeRuleRegion(val.provinceCode);
        }
        if (val.regionCode && val.regionCode !== "") {
          this.changeRuleCity(val.municipalityCode);
          this.changeRuleArea(val.regionCode);
        }
        let imageUrl = this.download + val.realisticPictureList[0].path;
        let obj = {
          name: "111.png",
          url: imageUrl
        };
        this.imgList = [obj];
        this.ruleForm = JSON.parse(JSON.stringify(val))
        this.$nextTick(function() {
          var th = this
          var map = new T.Map("mapContaion")
          map.centerAndZoom(new T.LngLat(th.ruleForm.lng,th.ruleForm.lat), 12);
          map.addOverLay(new T.Marker(new T.LngLat(th.ruleForm.lng,th.ruleForm.lat)))
          map.addEventListener('click',MapClick)
          function MapClick(e){
            map.clearOverLays();
            var marker = []
            marker.push(e.lnglat.getLng())
            marker.push(e.lnglat.getLat())
            console.log(marker)
            map.addOverLay(new T.Marker(new T.LngLat(marker[0],marker[1])))
            th.ruleForm.lng = marker[0]
            th.ruleForm.lat = marker[1]
          }
        });
        this.dialogVisible = true;
      },
      //删除桥梁
      removeBridge(val) {
        this.$confirm("此操作将删除桥梁, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api.bridge.removeBridgeBasicById({ id: val.id }).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "删除成功",
                  color: "success"
                });
                this.queryBridgeBasicByParentId(val.groupId);
              }
            });
          })
          .catch(() => {});
      },
      savedDalogVisible() {
        this.saveVisible = false;
        this.dialogVisible = true;
      },
      cancelBridge() {
        this.saveVisible = false
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      resetBridge() {
        this.ruleForm = {
          name: "",
          code: "",
          bridgeTypeId: "",
          bridgeTypeName: "",
          bridgeKindId: "",
          bridgeKindName: "",
          length: "",
          lat: "",
          lng: "",
          status: 1,
          desc: "",
          maintenanceType: "",
          maintenanceLevel: "",
          regionCode: "",
          municipalityCode: "",
          provinceCode: "",
          regionName: "",
          municipalityName: "",
          provinceName: "",
          standardId: "",
          standardName: "",
          realisticPictureList: []
        };
      },
      cancelFormSubmit() {
        this.dialogVisible = false;
        this.resetBridge();
      },
      //桥梁新增
      submit() {
        this.$refs["ruleForm"].validate(valid => {
          if (valid) {
            if(this.ruleForm.lng !== '') {
              if (this.addtitle === "新增桥梁") {
                this.$api.bridge
                  .addBridgeBasic({ ...this.ruleForm, groupId: this.groupId })
                  .then(res => {
                    if (res.data.success) {
                      this.$vs.notify({
                        text: "新增桥梁成功",
                        color: "success"
                      });
                      this.dialogVisible = false;
                      this.resetBridge()
                      this.queryBridgeBasicByParentId(this.groupId);
                    }
                  });
              } else {
                let data = {
                  name: this.ruleForm.name,
                  code: this.ruleForm.code,
                  bridgeTypeId: this.ruleForm.bridgeTypeId,
                  bridgeTypeName: this.ruleForm.bridgeTypeName,
                  bridgeKindId: this.ruleForm.bridgeKindId,
                  bridgeKindName: this.ruleForm.bridgeKindName,
                  length: this.ruleForm.length,
                  lat: this.ruleForm.lat,
                  lng: this.ruleForm.lng,
                  status: this.ruleForm.status,
                  desc: this.ruleForm.desc,
                  maintenanceType: this.ruleForm.maintenanceType,
                  maintenanceLevel: this.ruleForm.maintenanceLevel,
                  regionCode: this.ruleForm.regionCode,
                  municipalityCode: this.ruleForm.municipalityCode,
                  provinceCode: this.ruleForm.provinceCode,
                  regionName: this.ruleForm.regionName,
                  municipalityName: this.ruleForm.municipalityName,
                  provinceName: this.ruleForm.provinceName,
                  standardId: this.ruleForm.standardId,
                  standardName: this.ruleForm.standardName,
                  realisticPictureList: this.ruleForm.realisticPictureList,
                  id: this.ruleForm.id,
                  groupId: this.ruleForm.groupId,
                  bimFolderId: this.ruleForm.bimFolderId,
                  diseaseFolderId: this.ruleForm.diseaseFolderId,
                  maintenanceFolderId: this.ruleForm.maintenanceFolderId,
                  facadeFolderId: this.ruleForm.facadeFolderId,
                  realisticPictureFolderId: this.ruleForm.realisticPictureFolderId
                };
                this.$api.bridge.updateBridgeBasic(data).then(res => {
                  if (res.data.success) {
                    this.$vs.notify({
                      text: "修改桥梁成功",
                      color: "success"
                    });
                    this.dialogVisible = false;
                    this.queryBridgeBasicByParentId(this.ruleForm.groupId)
                    this.resetBridge()
                  }
                });
              }
            } else {
              this.$vs.notify({
                text: "请选择桥梁位置",
                color: "danger"
              });
            }
          }
        });
      },
      model(val) {
        this.$router.push({
          path: "/bridgeInformation/modelManagement",
          query: { id: val.id, detail:val }
        });
      }
    }
  };
</script>
<style lang="scss">
  .amap-sug-result {
    z-index: 999999;
  }
</style>
<style scoped lang="scss">
  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 30px;
  }
  /deep/.el-table__row {
    height: 30px;
  }
  .cell {
    max-height: 34px !important;
  }
  .bridge {
    width: 100%;
    height: 86vh;
    display: flex;
    justify-content: space-between;
    position: relative;
    .right {
      width: 100%;
      height: 100%;
      .flexBetween {
        display: flex;
        justify-content: space-between;
        .paddingLeft {
          margin-left: 20px;
        }
      }
      .tableTop {
        margin-top: 20px;
        height: calc(60% - 10px);
      }
      .page {
        position: absolute;
        left:45%;
        bottom:40px;
      }
    }
  }
  /deep/.el-dialog__title {
    color: #177dff;
    font-size: 2rem;
    text-align: center;
  }
  /deep/.el-dialog__header {
    text-align: center;
    padding: 34px 20px 10px;
    margin-top: 36vh;
  }
  /deep/.el-upload--picture-card {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 28px;
  }
  /deep/.el-upload-list--picture-card .el-upload-list__item {
    width: 60px;
    height: 60px;
  }
  .map_box {
    width: 640px;
    height: 200px;
    background: gainsboro;
    margin-top: 20px;
    position: relative;
    .item{
      position: absolute;
      z-index:10000;
      width:140px;
      top:10px;
      right:30px;
    }
  }
</style>

